<template>
  <div class="box" :class="{ active: row == 1 }">
    <div class="banner"></div>
    <div class="f1">
      <div class="breadcrumb">
        <h6 @click="back">
          <img src="@/assets/home/back.png" alt="" />
          返回上一页
        </h6>
      </div>
      <div class="f1_content">
        <h6 class="title">信用报告</h6>
        <div class="typeList">
          <div class="typeList_f1">
            <h4 class="label"><span style="color: #f05">*</span> 报告类型</h4>
            <div class="type">
              <div
                class="type_list"
                v-for="(item, index) in list"
                :key="item.type"
                :class="{ active: row == index }"
                @click="row = index"
              >
                <h5>{{ item.type }}</h5>
                <h6 :class="{ active: row == index }"></h6>
                <div style="display: flex; flex-direction: column; align-items: center">
                  <span style="font-size: 0.0625rem; font-weight: 200; color: #636363">{{
                    item.label1
                  }}</span>
                  <span style="font-size: 0.0625rem; font-weight: 200; color: #636363">{{
                    item.label2
                  }}</span>
                </div>
                <div class="check" v-show="row == index">
                  <img src="@/assets/report/组101.png" alt="" />
                </div>
              </div>
            </div>
          </div>
          <div class="typeList_f1" style="align-items: center">
            <h4 class="label"><span style="color: #f05">*</span> 企业名称</h4>
            <el-form :model="ruleForm" class="demo-ruleForm">
              <el-form-item label="">
                <el-input disabled v-model="ruleForm.entname"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="typeList_f1" style="align-items: center">
            <h4 class="label"><span style="color: #f05">*</span> 统一社会信用代码</h4>
            <el-form :model="ruleForm" class="demo-ruleForm">
              <el-form-item label="">
                <el-input disabled v-model="ruleForm.credit_no"></el-input>
              </el-form-item>
            </el-form>
          </div>

          <div class="sample">
            <span @click="sample(row)"> 样本预览</span>
            <img src="@/assets/report/组102.png" alt="" />
          </div>
          <!-- 报告内容 -->
          <div class="typeList_f1" v-show="row == 0">
            <h4 class="label">报告内容</h4>
            <table id="table">
              <tbody id="tbody">
                <tr>
                  <td scope="row" class="td">商务信用评估</td>
                  <td scope="row">商务信用评分、风险提示</td>
                </tr>
                <tr>
                  <td scope="row" class="td">企业基本信息</td>
                  <td scope="row">登记信息、信用评价、股东结构、主要人员、变更记录</td>
                </tr>
                <tr>
                  <td scope="row" class="td">企业关联信息</td>
                  <td scope="row">企业分支机构、企业对外投资、法人对外投资、法人在外任职</td>
                </tr>
                <tr>
                  <td scope="row" class="td">企业涉诉信息</td>
                  <td scope="row">
                    涉诉情况概览、企业裁判文书、企业法院公告、企业开庭公告、企业执行公告、企业失信公告
                  </td>
                </tr>
                <tr>
                  <td scope="row" class="td">企业经营风险</td>
                  <td scope="row">
                    经营风险概览、行政处罚、重大税收违法、经营异常、严重违法失信、清算记录、欠税记录、动产抵押、股权出质、股权冻结
                  </td>
                </tr>
                <tr>
                  <td scope="row" class="td">其他经营信息</td>
                  <td scope="row">
                    社保信息、知识产权-著作权、知识产权-软件著作权、知识产权-域名、知识产权-商标信息、知识产权-专利信息、知识产权-资质证书、招投标
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="typeList_f1" v-show="row == 1">
            <h4 class="label">报告内容</h4>
            <table id="table">
              <tbody id="tbody">
                <tr>
                  <td scope="row" class="td">商务信用评估</td>
                  <td scope="row">商务信用评分、风险提示</td>
                </tr>
                <tr>
                  <td scope="row" class="td">企业基本信息</td>
                  <td scope="row">登记信息、信用评价、股东结构、主要人员、变更记录</td>
                </tr>
                <tr>
                  <td scope="row" class="td">企业关联信息</td>
                  <td scope="row">企业分支机构、企业对外投资、法人对外投资、法人在外任职</td>
                </tr>
                <tr>
                  <td scope="row" class="td">企业涉诉信息</td>
                  <td scope="row">
                    涉诉情况概览、企业裁判文书、企业法院公告、企业开庭公告、企业执行公告、企业失信公告
                  </td>
                </tr>
                <tr>
                  <td scope="row" class="td">企业经营风险</td>
                  <td scope="row">
                    经营风险概览、行政处罚、重大税收违法、经营异常、严重违法失信、清算记录、欠税记录、动产抵押、股权出质、股权冻结
                  </td>
                </tr>
                <tr>
                  <td scope="row" class="td">其他经营信息</td>
                  <td scope="row">
                    社保信息、知识产权-著作权、知识产权-软件著作权、知识产权-域名、知识产权-商标信息、知识产权-专利信息、知识产权-资质证书、招投标
                  </td>
                </tr>
                <tr>
                  <td scope="row" class="td">进出口贸易信息</td>
                  <td scope="row">
                    海关信用信息、整体出口情况、企业近 12个月出口商品情况、企业近
                    12个月出口国别情况、整体进口情况、企业近12个月进口商品情况、企业近
                    12个月进口国别情况
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div class="typeList_f1" style="align-items: center" v-show="row != 0">
            <h4 class="label" style="margin-top: -0.0729rem">
              <span style="color: #f05">*</span> 手机号
            </h4>
            <el-form :model="ruleForm" class="demo-ruleForm" :rules="rules">
              <el-form-item label="" prop="phone">
                <el-input
                  @blur="appFincerPhone(ruleForm.phone)"
                  v-model="ruleForm.phone"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 数据授权说明 -->
          <div class="typeList_f1" style="margin-top: 0.0781rem" v-show="row == 1">
            <h4 class="label">数据授权说明</h4>
            <div class="explain">
              <p>
                您选择的报告版本包含海关数据分析，其相关数据的获取需被查询企业进行授权采集操作，稍后我们将通过预留的手机号与您取得联系并发送相关操作说明，请及时联系被查询企业进行数据采集，确认完成后请至个人中心查看报告记录。
              </p>
            </div>
          </div>
        </div>
        <!-- 服务协议 -->
        <div class="agreement">
          <img
            @click="submitBtn()"
            :src="require(`@/assets/home/组${radio ? '89' : '90'}.png`)"
            alt=""
          />
          <span> 阅读并同意 </span>
          <a href="../../static/协议/用户服务协议.pdf" target="_back">《用户服务协议》</a>
        </div>
        <div class="btn">
          <button :disabled="isLock" @click="goRiskDetails">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { myPostFetch } from '@/api/report'
export default {
  data() {
    return {
      row: 0,
      list: [
        {
          type: '基础版',
          label1: '快速了解',
          label2: '企业基本信息',
          reporttype: 1
        },
        {
          type: '标准版',
          label1: '全面贸易信息解析',
          label2: '和风险评估',
          reporttype: 2
        }
      ],
      isLock: false,
      radio: false, //企业授权服务状态变量
      native: 1,
      ruleForm: {
        credit_no: '',
        entname: '',
        phone: ''
      },
      rules: {
        phone: [{ required: true, message: '请输入手机号', trigger: 'blur' }]
      }
    }
  },
  mounted() {
    this.ruleForm.credit_no = sessionStorage.getItem('credit_no')
    this.ruleForm.entname = sessionStorage.getItem('matchItems')
    document.documentElement.scrollTop = 0
  },
  methods: {
    // 校验手机号
    appFincerPhone(phone) {
      let value = Number(phone)
      let reg = /^1[3-9]\d{9}$/
      if (!reg.test(value)) {
        this.ruleForm.phone = ''
      }
    },
    // 返回上一页
    back() {
      this.$router.go(-1)
    },
    // 查看样本预览
    sample(row) {
      let url = ''
      if (row == 0) {
        url = '../../static/协议/报告样例-基础版.pdf'
      } else if (row == 1) {
        url = '../../static/协议/报告样例-标准版.pdf'
      }
      const a = document.createElement('a') // 动态创建a标签，防止下载大文件时，用户没看到下载提示连续点击
      a.setAttribute('target', '_blank')
      a.href = url
      a.click()
    },
    submitBtn() {
      this.radio = !this.radio
    },
    async goRiskDetails() {
      this.isLock = true
      setTimeout(() => {
        this.isLock = false
      }, 3000)
      if (!this.radio) return this.$Message.error('请勾选协议')
      if (this.ruleForm.phone == '' && this.row != 0) return this.$Message.error('请输入手机号')

      let reporttype = this.row + 1 == 1 ? 3 : 2
      let url = '/zb/addBusinessReport'
      let params = {
        entname: this.ruleForm.entname,
        codeid: this.ruleForm.credit_no,
        reporttype: reporttype,
        phone: this.ruleForm.phone
      }
      let data = await myPostFetch(url, params)
      if (data.msg == '操作成功') {
        this.$router.push('/submit')
      }
    }
  }
}
</script>

<style lang="scss" scoped>
/*去掉列表前面的小点*/
ul {
  list-style: none;
}
.box {
  position: relative;
  width: 100%;
  height: 5.9896rem;
  box-sizing: border-box;
  padding-bottom: 0.4167rem;
  background: #f5f7fa;
  &.active {
    height: 1450px;
  }

  .banner {
    position: absolute;
    width: 100%;
    height: 1.0417rem;
    background: url(@/assets/report/组99.png);
    background-size: 100% 100%;
    z-index: 0;
  }
  .f1 {
    width: 100%;
    position: absolute;
    .breadcrumb {
      position: relative;
      margin: 0 auto;
      width: 6.25rem;
      height: 0.3958rem;
      background-color: rgba(255, 255, 255, 0);
      h6 {
        position: absolute;
        right: 0.1823rem;
        box-sizing: border-box;
        padding-top: 0.0938rem;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: 100%;
        font-size: 0.0833rem;
        font-weight: 300;
        color: #ffffff;
        text-decoration: underline;
        img {
          width: 0.0833rem;
          margin-right: 0.0417rem;
        }
      }
    }
    .f1_content {
      box-sizing: border-box;
      padding: 0.1146rem 0.1563rem;
      margin: 0 auto;
      width: 6.25rem;
      background: #fff;
      border-radius: 0.0208rem;
      .title {
        text-align: center;
        width: 100%;
        height: 0.2865rem;
        font-size: 0.1458rem;
        font-weight: 500;
        color: #000000;
        border-bottom: 0.0052rem solid #e0e0e0;
      }
      .typeList {
        box-sizing: border-box;
        padding-top: 0.2604rem;
        margin: 0 auto;
        width: 4.6875rem;
        .sample {
          cursor: pointer;
          display: flex;
          justify-content: flex-end;
          align-items: center;
          width: 3.5938rem;
          height: 0.1563rem;
          margin: 0 auto;
          font-size: 0.0729rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #4898e0;
          img {
            width: 0.026rem;
            height: 0.0521rem;
            margin-left: 0.0417rem;
          }
        }
        .typeList_f1 {
          display: flex;
          margin-bottom: 0.0781rem;
          .label {
            text-align: right;
            width: 0.7813rem;
            margin-right: 0.25rem;
            font-size: 0.0781rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #111;
          }
          .type {
            display: flex;
            justify-content: space-between;
            width: 3.125rem;
            height: 0.4688rem;
            margin-bottom: 0.2083rem;
            .type_list {
              position: relative;
              cursor: pointer;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              align-items: center;
              box-sizing: border-box;
              padding: 0.0573rem 0;
              width: 1.3021rem;
              height: 0.5208rem;
              background-color: #fff;
              border: 0.0052rem solid #ccc;
              border-radius: 0.0208rem;
              &.active {
                border: 0.0052rem solid #0a7be0;
                background: rgba(10, 123, 224, 0.1);
              }
              h5 {
                text-align: center;
                font-size: 0.0938rem;
                font-weight: 400;
                color: #000000;
              }
              h6 {
                width: 0.4688rem;
                height: 0.0052rem;
                background: #dcdcdc;
                &.active {
                  background: #0a7be0;
                }
              }
              .check {
                width: 0.125rem;
                height: 0.125rem;
                position: absolute;
                bottom: -0px;
                right: -0px;
                img {
                  width: 0.1406rem;
                  height: 0.125rem;
                  position: absolute;
                  right: 0px;
                  bottom: 0px;
                  z-index: 999;
                }
              }
            }
          }
          // 表格
          table {
            width: 3.125rem;
            margin-bottom: 0.1563rem;
            border-collapse: collapse;
          }
          table td {
            box-sizing: border-box;
            height: 0.2188rem;
            border: 0.0052rem solid #dbdbdb;
            padding: 0.0521rem 0.1042rem;
            font-size: 0.0781rem;
            font-family: SourceHanSansSC-Light;
            font-weight: 500;
            color: #545454;
            line-height: 0.1354rem;
          }
          table .td {
            width: 0.9375rem;
            font-size: 0.0781rem;
            font-weight: 500;
            color: #000000;
            text-align: center;
            background-color: #f2f9fc;
          }
          //数据授权说明
          .explain {
            box-sizing: border-box;
            padding: 0.1198rem 0.1823rem;
            width: 3.125rem;
            background: #f0f0f0;
            p {
              font-size: 0.0729rem;
              font-family: Source Han Sans SC;
              font-weight: 300;
              color: #545454;
              line-height: 0.1354rem;
            }
          }
        }
      }
      // 服务协议
      .agreement {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 0.1302rem;
        text-align: center;
        margin: 0.1042rem 0;
        user-select: none;
        span {
          font-size: 0.0729rem;
          color: #666;
          margin-left: 0.0365rem;
        }
        img {
          width: 0.0781rem;
          height: 0.0781rem;
          cursor: pointer;
        }
        a {
          cursor: pointer;
          font-size: 0.0729rem;
          color: #3f6ef2;
        }
      }
      .btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;

        button {
          align-items: center;
          justify-content: center;
          display: flex;
          border-radius: 0.026rem;
          width: 1.1979rem;
          height: 0.2083rem;
          background: #0a7be0;
          font-size: 0.0833rem;
          font-weight: 300;
          color: #ffffff;
          &.active {
            background-color: #8e8e8e;
          }
        }
      }
    }
  }
}
/* 输入框样式  */
::v-deep .el-input__inner {
  font-size: 0.0625rem;
  box-sizing: border-box;
  width: 3.125rem;
  height: 0.1927rem;
  font-size: 0.0781rem;
  border: 0.0052rem solid #e0e0e0;
  border-radius: 0px;
  padding: 0.0521rem;
  color: #606266;
  outline: 0;
  line-height: 0.1823rem !important;
}
::v-deep .el-form-item {
  margin-bottom: 0.0521rem;
}
</style>
